Вы искали css

Загрузка js и css «по требованию»

25.05.2021 Павел Грибов WEB

Задача: по какому то условию (ну в моем случае это загрузка скрипта «Тура по сайту» если вдруг пользователь его не проходил), необходимо до грузить дополнительные JS и CSS файлы, а по завершению их загрузки — запустить.

Решение:

function TourStart(){
    if ((localStorage.getItem(document.location.pathname+"_tour")==null)||(localStorage.getItem(document.location.pathname+"_tour")==false)){
        element = document.createElement("script");
        element.src = "https://shepherdjs.dev/dist/js/shepherd.js";
        element.addEventListener('load', () => {
            console.log("--загружаем тур!");
            element = document.createElement("script");
            element.src = "/js/tour.min.js";
            document.body.appendChild(element);
        });
        document.body.appendChild(element);
        element = document.createElement("link");
        element.href = "https://shepherdjs.dev/dist/css/shepherd.css";
        element.rel="stylesheet"
        document.body.appendChild(element);        
        
    };
};

console.log("-- main.js загружен");
$(document).ready(function() {
   TourStart(); // стартовать тур по странице если нужно..
});

function TourStart(){

if ((localStorage.getItem(document.location.pathname+"_tour")==null)||(localStorage.getItem(document.location.pathname+"_tour")==false)){

element = document.createElement("script");

element.src = "https://shepherdjs.dev/dist/js/shepherd.js";

element.addEventListener('load', () => {

console.log("--загружаем тур!");

element = document.createElement("script");

element.src = "/js/tour.min.js";

document.body.appendChild(element);

});

document.body.appendChild(element);

element = document.createElement("link");

element.href = "https://shepherdjs.dev/dist/css/shepherd.css";

element.rel="stylesheet"

document.body.appendChild(element);

};

console.log("-- main.js загружен");

$(document).ready(function() {

TourStart(); // стартовать тур по странице если нужно..

});

Оставить комментарий javascript, загрузка

Сборка JS и CSS для продакшена при помощи npm grunt

22.04.2021 Павел Грибов WEB

В жизни каждого ~~программиста~~ мужика начинается период, когда размер и количество js файлов в проекте начинает невероятно множиться. И если для разработки это не особо мешает, а даже наоборот помогает структурировать информацию, для для продакшена это зло. Когда браузер пытается выкачать при загрузке страницы 50+ файлов css и js, случается так, что ему становится плоховато. Да и скорость рендеринга падает значительно. Есть решение: grunt. Пакет для npm который позволяет отслеживать изменения файлов в некоторых папках, а при изменении формировать один (несколько) выходных сжатых файлов.

Установка:

npm install -g grunt-cli grunt-contrib-uglifyjs grunt-contrib-watch --save-dev

npm install -g grunt-cli grunt-contrib-uglifyjs grunt-contrib-watch --save-dev

Для настройки необходимо создать файл Gruntfile.js. У меня вышло примерно такое содержимое:

module.exports = function(grunt) {
  grunt.initConfig({
    // 1.  эти файлы сжимаем
    uglify: {
            my_target: {
                files: {
                    'public/js/ууууу.min.js': ['assets/js/ууууу/*.js'],
                    'public/js/main.min.js': ['assets/js/main.js']
                }
        }
    },
    // 2. задача по отслеживанию изменений
    watch: {
      source: {
        files: ['sass/**/*.scss', 'views/**/*.jade','**/*.js'],
        tasks: ['uglify'], //сжимаем
        options: {
          livereload: true
        }
      }
    }    
    
    });               
    // 3. Сообщаем, какие плагины мы собираемся использовать
    grunt.loadNpmTasks('grunt-contrib-uglify'); //сжатие
 
    // 4. Определяем задачу по умолчанию, которая будет выполняться при запуске команды grunt в терминале.
    grunt.registerTask('default', ['uglify']);
    grunt.loadNpmTasks('grunt-contrib-watch'); //задача отслеживания изменений
};

module.exports = function(grunt) {

grunt.initConfig({

// 1. эти файлы сжимаем

uglify: {

my_target: {

files: {

'public/js/ууууу.min.js': ['assets/js/ууууу/*.js'],

'public/js/main.min.js': ['assets/js/main.js']

}

// 2. задача по отслеживанию изменений

watch: {

source: {

files: ['sass/**/*.scss', 'views/**/*.jade','**/*.js'],

tasks: ['uglify'], //сжимаем

options: {

livereload: true

}

});

// 3. Сообщаем, какие плагины мы собираемся использовать

grunt.loadNpmTasks('grunt-contrib-uglify'); //сжатие

// 4. Определяем задачу по умолчанию, которая будет выполняться при запуске команды grunt в терминале.

grunt.registerTask('default', ['uglify']);

grunt.loadNpmTasks('grunt-contrib-watch'); //задача отслеживания изменений

};

Теперь если в консоли введёте:

grunt watch

1 2	grunt watch

То запустится и будет висеть задача отслеживания изменений и минимификации файлов.

Оставить комментарий grunt, npm, минификация, склейка

CSS: Выравнивание содержимого блоков по вертикали

05.03.2021 Павел Грибов WEB

Чтобы получилось нечто подобное:

HTML:

    <div class="tile2">
        <div class="icons_left"><img height="32px" src="/images/list.png"></div>
        <div class="icons_right" ><img height="32px" src="/images/heart.png"></div>
    </div>

</div>

CSS:

.tile2{
    grid-template-columns: 50% 50%;
    display: flex;
    height: 100%;    
}
.tile2>.icons_left {
    color: #003264;
    font-weight: bold;
    font-size: xx-large;
    text-align: end;
    margin:  auto;
    cursor: pointer;
} 
.tile2>.icons_right {
    color: #003264;
    font-weight: bold;
    font-size: xx-large;
    text-align: left;
    margin:  auto;
    cursor: pointer;
}

.tile2{

grid-template-columns: 50% 50%;

display: flex;

height: 100%;

}

.tile2>.icons_left {

color: #003264;

font-weight: bold;

font-size: xx-large;

text-align: end;

margin: auto;

cursor: pointer;

}

.tile2>.icons_right {

color: #003264;

font-weight: bold;

font-size: xx-large;

text-align: left;

margin: auto;

cursor: pointer;

}

Оставить комментарий css, vertical-alling, выравнивание по вертикали

Фон картинки на весь экран CSS

26.07.2019 Павел Грибов WEB

Каждый аз гуглю, когда нужно. Решил таки уж у себя сохранить 😉

body {
    background-image: url("../images/fone.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
}

body {

background-image: url("../images/fone.jpg");

background-repeat: no-repeat;

background-size: cover;

background-position: center;

height: 100%;

}

Оставить комментарий backgroud-image, css, на весь экран

Скругление «всего и вся» посредством CSS

31.01.2014 Павел Грибов WEB

Основная проблема «скругления», в получении кроссбраузерностни. Я использую следующий код, для «скругления»:

.round
{
border: 1px;
border-style: solid;
border-radius: 5px;
-webkit-border-radius: 5px;
}

.round

{

border: 1px;

border-style: solid;

border-radius: 5px;

-webkit-border-radius: 5px;

}

После чего, в HTML добавляем class=»round» для того элемента углы которого хотим «скруглить», например:

<img width=200 class="round" src="foto.jpg">

1	<img width=200 class="round" src="foto.jpg">

Оставить комментарий css, html, скругленные углы

1 2 3 … 8 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30